<div class="yl10-content">
    <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
        <div class="mb-4">
            <h5 class="mb-4">
                <i class="fa fa-list"></i> 出库信息</h5>
            <p-table #dataTable [value]="outs" rows="10" [paginator]="false" [scrollable]="true" ScrollWidth="100%"
                dataKey="id" [responsive]="primengTableHelper.isResponsive" [expandedRowKeys]="expandedRowKeys"
                [resizableColumns]="primengTableHelper.resizableColumns">
                <ng-template pTemplate="caption">
                    <div class="row align-items-center m--margin-bottom-10">
                        <div class="col-xl-4" style="text-align:left">
                            <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header"
                                selectedItemsLabel="已选择 {0} 列" [style]="{padding: 0}" defaultLabel="Choose Columns">
                            </p-multiSelect>
                        </div>
                    </div>
                </ng-template>
                <ng-template pTemplate="header">
                    <tr>
                        <!-- <th style="width: 25px"></th> -->
                        <th width="60px">
                            操作
                        </th>
                        <th width="80px">
                            出库数量
                        </th>
                        <th *ngFor="let col of selectedColumns" width="{{col.width}}">
                            {{col.header}}
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record let-expanded="expanded">
                    <tr>
                        <!-- <td style="width: 25px">
              <a href="javascript:;" [pRowToggler]="record">
                <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
              </a>
            </td> -->
                        <th width="60px">
                            <button type="button" class="btn btn-success btn-sm"
                                (click)="yl10ChildModal.show(pipe.id, record.id)">退库</button>
                        </th>
                        <th width="80px">
                            {{record.itemAmount}}
                        </th>
                        <td *ngFor="let col of selectedColumns" width="{{col.width}}">
                            {{record[col.field]}}
                        </td>
                    </tr>
                </ng-template>
                <!-- <ng-template pTemplate="rowexpansion" let-record>
          <tr>
            <td [attr.colspan]="selectedColumns.length + 5">
              
      </td>
      </tr>
      </ng-template> -->
            </p-table>
            <h5 class="mb-4" style="margin-top: 20px;">
                <i class="fa fa-list"></i> 退库信息</h5>
            <p-table [value]="returns" [scrollable]="true" ScrollWidth="100%">
                <ng-template pTemplate="header">
                    <tr>
                        <th width="80px">退库数量</th>
                        <th width="200px">退库位置</th>
                        <th *ngFor="let col of selectedColumns" width="{{col.width}}">
                            {{col.header}}
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData>
                    <tr *ngFor="let item of rowData.returnMaterialForProduct">
                        <td width="80px">{{item.materialForProduct.itemAmount}}</td>
                        <td width="200px">{{item.locationOfMaterial.displayName}}</td>
                        <td *ngFor="let col of selectedColumns" width="{{col.width}}">
                            {{item.materialForProduct[col.field]}}
                        </td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
    </div>
    <yl10ChildModal #yl10ChildModal (modalSave)="reloadPage()"></yl10ChildModal>
</div>
